<script lang="ts" setup name="News">
    import { reactive } from 'vue';
    import { type NewItem } from '@/types';
    import { useRouter } from 'vue-router';

    const router = useRouter();

    let newsList = reactive<Array<NewItem>>([
        { id: 'ididid01', title: '很行的抗癌食物', content: '西兰花' },
        { id: 'ididid02', title: '如何一夜致富', content: '学Vue3' },
        { id: 'ididid03', title: '震惊，万万没想到', content: '特朗普居然当选美国总统' },
        { id: 'ididid04', title: '好消息！', content: '我就不告诉你' },
    ]);

    // 编程式路由导航，重点掌握！！！
    function showNewItem(newItem: NewItem) {
        router.push({
            name: 'xiangqing',
            params: {
                id: newItem.id,
                title: newItem.title,
                content: newItem.content,
            }
        });
    }
</script>

<template>
    <!-- 导航区 -->
    <div class="news">
        <ul>
            <li v-for="newItem in newsList" :id="newItem.id">
                <button @click="showNewItem(newItem)">详情</button>
                <RouterLink
                    :to="{
                        name: 'xiangqing',
                        params: {
                            id: newItem.id,
                            title: newItem.title,
                            content: newItem.content,
                        }
                    }">
                    {{ newItem.title }}
                </RouterLink>
            </li>
        </ul>
    </div>
    <!-- 展示区 -->
    <div class="news-content">
        <RouterView></RouterView>
    </div>
</template>

<style scoped>
    .news {
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        height: 100%;
    }
    .news ul {
        margin-top: 30px;
        list-style: none;
        padding-left: 10px;
    }
</style>